选择器用于寻找或选择HTML元素。 同时多个选择器，通过 , 逗号分割

---

标签定义 - 根据功能分类： #简单选择器 根据标签、ID、类 来寻找元素。 #属性选择器 根据属性或属性值来选择元素。 #组合选择器 根据元素之前的特定关系来寻找元素。 #伪类选择器 用于选择元素的某个状态。 #伪元素选择器 用于选择元素的某个部分。

选择器

通用选择器

#简单选择器

选择页面中的全部元素。

<h1>我是标题</h1>
<span>我是内容</span>

*{
	xxx: xxx;
}

元素选择器

#简单选择器

直接选择元素的标签。

<h1>我是标题</h1>
<span>我是内容</span>

h1{
	xxx: xxx;
}
span{
	xxx: xxx;
}

ID选择器

#简单选择器

选择元素的ID属性。 原则上，在整个页面中ID是唯一的。

<div>
	<span>用户名: </span>
	<span id='user'>响当当</span>
</div>

#user{
	xxx: xxx;
}

类别选择器

#简单选择器

选择元素的Class属性。 该属性允许添加多个参数，可通过空格分割。

<div class='box'>
	<span>我是内容</span>
</div>

<div class='bottom box'>
	<span>我是底部内容</span>
</div>

.box{
	xxx: xxx;
}
.bottom{
	xxx: xxx;
}

后代选择器

#组合选择器

通过空格，从所有后代关系中选择。 选择器前后不可为空。

<div class='box'>
	<div>
		<span>我是标题</span>
	</div>
	<span>我是内容</span>
</div>

.box span{
	xxx: xxx;
}

子选择器

#组合选择器

通过大于，从所有子元素中选择。

<div class='box'>
	<div>
		<span>我没被选中</span>
	</div>
	<span>我是内容</span>
</div>

.box > span{
	xxx: xxx;
}

哥哥选择器

#组合选择器

通过加号，选择下一个兄弟元素的选择器。 弟弟本身不会被选到。

<ul class='box'>
	<li>内容1</li>
	<li class='active'>内容2</li>
	<li>内容3，我被选中了</li>
	<li>内容4</li>
</ul>

li.active + li{
	xxx: xxx;
}

哥哥们选择器

#组合选择器

通过加号，选择后续所有兄弟元素的选择器。 弟弟本身不会被选到。弟弟前面的也不会选到。

<ul class='box'>
	<li>内容1</li>
	<li class='active'>内容2</li>
	<li>内容3，我被选中了</li>
	<li>内容4，我被选中了</li>
</ul>

li.active ~ li{
	xxx: xxx;
}

鼠标行为选择器

#伪类选择器

选择元素时某种鼠标状态的样式。 元素和状态之前不可有空格。 link和visited只可作用于a标签

<a class='a'>我是点击前的超链接</a>
<a class='b'>我是点击后的超链接</a>
<span class='c'>我是悬停</span>
<span class='d'>我是点击时</span>

span.a:link{ xxx: xxx };
span.b:visited{ xxx: xxx };
span.c:hover{ xxx: xxx };
span.d:active{ xxx: xxx };

首文本选择器

#伪元素选择器

用于修饰该元素的第一个文本，行内元素无法被选择。 文本前后的标点符号会被一起选中。 如果该元素内部包裹元素，则修饰第一个子元素的第一个文本。

<span>修饰我的首个文本</span>

span::first-letter{
	xxx: xxx 
}

首行文本选择器

#伪元素选择器

用于选择该元素的第一行文字，行内元素无法被选择。 如果该元素内部包裹元素，则修饰第一个子元素的第一行文本。

<span>修饰我的首行文本</span>

span::first-line{
	xxx: xxx 
}

之前选择器

#伪元素选择器

用于修饰该元素内部，最前面的部分。 通过content属性，可添加文本内容。 通过定义成块状元素，可添加形状或背景图。

<span>修饰我内容之前的部分</span>

span::before{
	content: '';
	display: 'block';
	width: 10px;
	height: 10px;
	background-image: url(xxx);
}

之后选择器

#伪元素选择器

用于修饰该元素内部，最前面的部分。 通过content属性，可添加文本内容。 通过定义成块状元素，可添加形状或背景图。

<span>修饰我内容之前的部分</span>

span::after{
	content: '';
	display: 'block';
	width: 0px;
	height: 0px;
	border: 10px solid transparent;
	border-top-color: #000;
}

选中文本选择器

#伪元素选择器

用于修饰被选择后的文本。 只有部分样式会起效果：color文本颜色、background背景颜色(非图片)、cursor鼠标样式、outline描边效果。 添加任意样式后，被选择后文本的默认样式随即失效。

<span>修饰我被鼠标拖拽选择后的样式</span>

span::selection{
	border: none;
}

组合规则

元素选择器+ID选择器：
	h1#title{
		xxx: xxx;
	}
	
元素选择器+类选择器：
	div.box{
		xxx: xxx;
	}